
<template>
	<div class="sxFilter">
		<scroll-view class="wuc-tab" :class="tabClass" :style="tabStyle" scroll-with-animation scroll-x :scroll-left="scrollLeft">
			<div class="flex text-center" v-if="textFlex">
				<div class="wuc-tab-item flex-sub" :class="index === tabCur ? selectClass + ' cur':''" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
					<text :class="item.icon"></text>
					<span :class="{active:isactive&&tabCur==index}">{{item.name}}</span>
					<text class="iconfont selectIcon " :class="{active:isactive&&tabCur==index}">&#xe91e;</text>
				</div>
			</div>
		</scroll-view>

		<div class="contentBox" v-if="isactive" >
			<div class="nav">
				<ul>
					<li  v-for="(item,index) in navList"  :key="index" class=" text-overflow"
						 @click="navFn(index,item)" :class="{active:nvaIndex==index}">
					<span v-if="propKey.navKey">{{item[propKey.navKey]}}</span>
					<span v-else>{{item.name}}</span>
					</li>
				</ul>
			</div>
			<div class="showContent">
				<div class="choseList">
					<ul>
						<li  v-for="(item,index) in contentList"  :key="index" class="text-overflow"
						@click="contentFn(index,item)"	 :class="{active:contentIndex==index}">
							<span v-if="propKey.contentKey">{{item[propKey.contentKey]}}</span>
							<span v-else>{{item.name}}</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="mengcheng" v-if="isactive" @click="tabSelect(tabCur)"></div>
	</div>

</template>
<script>

export default {
	name: 'wuc-tab',
	data() {
		return {
			isactive: false, // 是否下拉
			nvaIndex: 0,
			contentIndex: null
		}
	},
	props: {
		active: {
			type: Boolean,
			default() {
				return false
			}
		},
		// 字段名重指向
		propKey: {
			type: Object,
			default() {
				return {}
			}
		},
		tabList: {
			type: Array,
			default() {
				return []
			}
		},
		navList: {
			type: Array,
			default() {
				return []
			}
		},
		contentList: {
			type: Array,
			default() {
				return []
			}
		},
		tabCur: {
			type: Number,
			default() {
				return 0
			}
		},
		tabClass: {
			type: String,
			default() {
				return ''
			}
		},
		tabStyle: {
			type: String,
			default() {
				return ''
			}
		},
		textFlex: {
			type: Boolean,
			default() {
				return true
			}
		},
		selectClass: {
			type: String,
			default() {
				return 'slf'
			}
		}
	},
	mounted() {
		this.isactive = this.active
	},
	methods: {
	    resize() {
			this.nvaIndex = 0
			this.contentIndex = null
		},
		tabSelect(index, e) {
			this.isactive = !this.isactive
			if (this.tabCur !== index) {
				this.isactive = true
				this.resize()
			}
			this.$emit('update:active', this.isactive)
			this.$emit('update:tabCur', index)
			this.$emit('change', index)
		},
		contentFn(index, item) {
	        if (this.contentIndex == index) {
				this.contentIndex = null
			} else {
				this.contentIndex = index
			}
			this.$emit('choseContent', {
				item,
				index,
				'chose': this.contentIndex != null
			})
		},
		navFn(index, item) {
			if (this.nvaIndex == index) {
			    return false
			} else {
				this.nvaIndex = index
				this.contentIndex = null
				this.$emit('choseNav', {
					item,
					index
				})
			}
		}
	},
	computed: {
		scrollLeft() {
			return (this.tabCur - 1) * 60
		}
	}
}
</script>
<style scoped lang="scss">
div, scroll-view, swiper {
	box-sizing: border-box;
}
.wuc-tab {
    white-space: nowrap;
	z-index: 888;
	background-color: #fff;
}
.wuc-tab {
	box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}
.wuc-tab-item {
    height: 50upx;
    display: inline-block;
    line-height: 50upx;
    margin: 0 10upx;
    padding: 0 20upx;
	color: #7d7e80;
}

.wuc-tab-item.cur {
    border-bottom: 4upx solid;
}

.wuc-tab.fixed {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1024;
	box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}

.flex {
    display: flex;
	justify-content: start;
}
.text-center {
    text-align: center;
}
.flex-sub {
    /*flex: 1;*/
}
.text-blue{
  color:#0081ff;
}
.text-white{
  color:#ffffff;
}
.bg-white{
    background-color: #ffffff;
}
.bg-blue{
    background-color: #0081ff;
}
.text-orange{
  color: rgb(255, 209, 26)
}
.text-black{
	color: #323233
}
.text-black.cur {
	border-color: rgb(255, 209, 26);
}

.slf.cur {
	border-color: #fff;
}

.text-xl {
	font-size: 36upx;
}
.active{
	color: rgb(255, 209, 26);
}
/*===*/
.sxFilter{
	background-color: #fff;
	width: 100vh;
	z-index: 999;
	.selectIcon {
		color: #7d7e80;
		font-size: 32PX;
		margin: 0 0 0 10px;
		&.active{
			color: rgb(255, 209, 26);
			transform:rotate(180deg);
			transform-origin: center;
		}
	}
	.contentBox {
		height: 50vh;
		box-shadow: 2px 2px 5px #efefef;
		display: flex;
		align-items: center;
		justify-content: start;
		.nav{
			width: 190px;
			height: 100%;
			border-right: 1px solid #efefef;
			overflow-y: auto;
			li{
				text-align: center;
			}
		}
		.showContent{
			height: 100%;
			flex: 1;
			padding: 0 20px;
			overflow-y: auto;
			li{
				text-align: left;
				border-bottom: 1px solid #efefef;
			}
		}
		ul{
			li{
				height: 80px;
				line-height: 80px;
				/*border: 1px solid red;*/
			}
		}
	}
	.mengcheng{
		background-color: rgba(0,0,0,0.5);
		width: 100vh;
		height: 100vh;
		position: fixed;
	}
}

</style>
